<!DOCTYPE html>
<html xmlns:th="http://www.w3.org/1999/xhtml">
<meta charset="utf-8">
<style>
    .carousel,.carouselc,.lectureVideoC1{
        margin-top: 10px;
    }
    .carousel img,.carouselc img,.lectureVideoC1 img{
        margin-right: 10px;
    }
    .carousel span{
        display: inline-block;
        margin-right: 50px;
    }
    .carouselVideo,.carouselVideod,.lecturePictureC1{
        margin-top: 20px;
    }
    .carouselVideo video,.carouselVideod video,.lecturePictureC1 video{
        margin-bottom: 20px;
        height: 300px !important;
    }

    .print{
        width: 400px;
        margin: 0 auto 20px;
        display: inline-block;
    }
    .print img{
        width: 100%;
    }

    .carousel video,
    .carouselVideo video{
        width: 400px !important;
        height: 300px !important;
        margin: 0 auto;
        display: inline-block;
    }
    .refereeRemark{
        margin-top: 10px;
    }
    .box{
        margin-bottom: 30px;
    }

</style>
<head th:include="include :: header"></head>
<body class="gray-bg">
<div class="wrapper wrapper-content ">
    <div class="row">
        <div class="col-sm-12" style="float: initial">
            <div class="ibox float-e-margins">
                <div class="ibox-content">

                    <div class="col-sm-12" style="float: initial">
                        <div id="b">

                        </div>

                        <div id="c">

                        </div>

                    </div>

                </div>
            </div>
        </div>
    </div>
</div>
<div th:include="include::footer"></div>
<script>

    $(function (){
        let row = JSON.parse(sessionStorage.getItem('row'));
        let str = '';
        present();
        function present(){

                if( row.markVO ){
                    let simg = '', svio = '';
                    row.markVO.map(function (v,k){
                            simg = '';
                            svio = '';
                            if( v.picture ){
                                let picture = v.picture.split(',');
                                    picture.map(function (item){
                                        simg += `
                                            <div class="print"> <img src="${item}"></div>
                                        `
                                    })
                            }

                            if( v.video ){
                                let video = v.video.split(',');
                                video.map(function (item){
                                    svio += `
                                        <video controls autoplay name="media">
                                          <source src="${item}" type="video/mp4">
                                        </video>
                                    `
                                })
                            }

                            str += `
                                <div class="box">
                                    <p style="margin-bottom: 10px">裁判${convet(parseInt(v.refereesNumber))}</p>
                                    <p>${k+1}.${v.topicName}:</p>
                                    <div class="carousel">
                                        <span>裁判上传的图片：</span> ${simg}
                                    </div>
                                    <div class="carousel">
                                        <span>裁判上传的视频： </span>${svio}
                                    </div>
                                    <div class="refereeRemark">裁判备注： ${v.refereeRemark}</div>
                                </div>
                            `;
                    })
                    $("#b").html(str);
                }else{
                    $("#b").html('暂无媒体资源');
                }
        }

    })

    function convet(ev){
        switch (ev){
            case 1 : return '一';break;
            case 2 : return '二';break;
            case 3 : return '三';break;
            case 4 : return '四';break;
            case 5 : return '五';break;
            case 6 : return '六';break;
            case 7 : return '七';break;
            case 8 : return '八';break;
            case 9 : return '九';break;
            case 10 : return '十';break;
        }
    }

</script>
</body>
</html>
